<template>
	<div id="container">
		<baidu-map class="map" ak="bGZBfl3bGUuoQ2KZxLsscGmnCUif2IrG" @ready="handler" :center="location" :mapClick="false"
			scroll-wheel-zoom :zoom="current_zoom" :min-zoom='5' :max-zoom='20'>
			<!-- <bm-marker v-for="(item,index) in ponArr" :key='index' v-if="checked2&&checked5"
				:icon="index==0?iconsArr[1]:index==(ponArr.length-1)?iconsArr[0]:iconsArr[2]"
				:position="item" :zIndex="index==0||index==(ponArr.length-1)?'9999':'999'" @click='getLocationPoint(item,index)'>
				<bm-label v-if='index==0'  :content="(index+1)+' 起始站 '+nameArr[index]" :labelStyle="{color:'#2486ff', fontSize :'12px',borderColor:'#2486ff'}"
					:offset="{width:25, height: -15}" />
				<bm-label v-else-if="index==(ponArr.length-1)"  :content="(index+1)+' 终点站 '+nameArr[index]" :labelStyle="{color:'#ff0000', fontSize :'12px'}"
					:offset="{width:25, height: -15}" /> -->
				<!-- <bm-label v-else-if="nameArr[index]==input3"  :content="(index+1)+'  '+nameArr[index]" :labelStyle="{color:'#ff00ff', fontSize :'15px',fontWeight:'700',borderColor:'#ff00ff'}"
					:offset="{width:25, height: -15}" /> -->
				<!-- <bm-label v-else  :content="(index+1)+'  '+nameArr[index]" :labelStyle="{color:'#f9a72c', fontSize :'12px',borderColor:'#f9a72c'}"
					:offset="{width:25, height: -15}" />
			</bm-marker> -->
			<bm-marker v-for="(item,index) in ponArr" :key='index' v-if="checked2"
				:icon="index==0?iconsArr[1]:index==(ponArr.length-1)?iconsArr[0]:iconsArr[2]"
				:position="item" :zIndex="index==0||index==(ponArr.length-1)?9999:999" @click='getLocationPoint(item,index)'>
				<bm-label v-if='index==0'  :content="(index+1)+' 起始站 '+nameArr[index]" :labelStyle="{color:'#233bc9', fontSize :'16px',fontWeight:'700',borderColor:'#233bc9'}"
					:offset="{width:25, height: -15}" />
				<bm-label v-else-if="index==(ponArr.length-1)"  :content="(index+1)+' 终点站 '+nameArr[index]" :labelStyle="{color:'#ff0000', fontSize :'16px',fontWeight:'700',borderColor:'#ff0000'}"
					:offset="{width:25, height: -15}" />
				<bm-label v-else  :content="(index+1)+'  '+nameArr[index]" :labelStyle="{color:'#079711', fontSize :'14px',borderColor:'#079711',fontWeight:'700'}"
					:offset="{width:25, height: -15}" />
			</bm-marker>
			<bm-scale anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-scale>
			<bm-city-list anchor="BMAP_ANCHOR_TOP_RIGHT" @changeAfter='cityChange'></bm-city-list>
			<bm-info-window :position="pointsed" :show='show' :width="300" :offset='{width: 0,height: -10}'  @close="infoWindowClose"
				@open="infoWindowOpen">
				<p>站台:{{nameArr[indexs]}}</p>
				<p>途经线路：{{titleBus}}</p>
				<p>设备号：<span style="color: red;margin: 5px;">{{stationData.number!=''?stationData.number:'(无)'}}</span>
					<el-button type="primary" @click="dialogVisible = true" style='padding:3px 5px;margin-left: 15px;' v-show='stationData.number==""'>站台配置</el-button>
					<el-button type="primary"  style='padding:3px 5px;margin-left: 15px;' v-show='stationData.number!=""' @click='removeConfig'>删除配置</el-button>
				</p>
				<ul style="background-color: #000000;color: red;text-align: center;">
					<li v-for="(item,index) in stationMsg" :key='index'>{{item.message}}</li>
				</ul>
			</bm-info-window>
		</baidu-map>
		<el-dialog
		  title="站台配置"
		  :visible.sync="dialogVisible"
		  width="30%">
		  <p>
		  	<span>设备号：</span>
		  	<el-input v-model="input5" size="mini" placeholder="请输入设备号" style='width: 180px;margin-right: 15px;'></el-input>
		  </p>
		  <div>
		  	<span style="margin-right: 10px;">线路：</span>
		  	<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
		  	  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
		  	    <el-checkbox v-for="(item,index) in titleBusArr" :label="item" :key="index" style='margin-right: 20px;border: 1px solid gray;padding: 5px;margin-bottom: 5px;'>{{item}}</el-checkbox>
		  	  </el-checkbox-group>
		  </div>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="dialogVisible = false" style='padding: 5px;'>取 消</el-button>
		    <el-button type="primary" @click="configDev" style='padding: 5px;'>确 定</el-button>
		  </span>
		</el-dialog>
		<div class="lineBox" :class="{ active: isUnfold }">
		  <p class="lineTop">
			  线路列表
			  <span class="unfold" @click="Unfold">
			  	<i v-if="isUnfold" class="el-icon-arrow-down"></i>
			  	<i v-else class="el-icon-arrow-up"></i>
			  </span>
		  </p>
		  <div class="lineContent">
			<div >
				<el-checkbox v-model="checked1" @change='changeLineShow' style="margin-left:10px;"><span style="margin-left: -5px;">线路显示</span></el-checkbox>
				<el-checkbox v-model="checked2" style="margin-left:30px;"><span style="margin-left: -5px;">站台显示</span></el-checkbox>
			</div>
			<div>
				<span>上下行：</span>
				<el-select v-model="input2" placeholder="" size='mini' style='width: 150px;margin-top: 2px;'>
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</div>
			<span>站台名：</span>
			<el-input placeholder="请输入站台" v-model="input3" size='mini' style='margin-top: 5px;width: 150px;'></el-input>
			<button @click="getBtn2" style='margin-top: 5px;padding:2px;10px;width: 100%;'>查找线路</button>
			<div style="display:flex;flex-wrap:wrap;max-height: 100px;overflow: auto;">
				<!-- <el-scrollbar style='max-height: 100px;'> -->
					<div v-for='(item,index) in titleBusArr2' :key='index'>
						<span style="margin-right: 5px;">{{item.stationName}}:</span>
						<el-button v-for='(items,indexs) in item.stationLine' :key='indexs' :class='{actives:indexNun==indexs}' style='padding: 3px;width:55px;margin-left: 0;margin-right: 5px;margin-top: 5px;' @click='lineBtnChange(items,indexs,index)'>{{items.label}}</el-button>
					</div>
				<!-- </el-scrollbar> -->
			</div>
			<el-input
			  v-model="deptName"
			  placeholder="请输入线路名"
			  clearable
			  size="small"
			  prefix-icon="el-icon-search"
			  style="margin-bottom:5px;margin-top: 5px;"
			/>
			<el-scrollbar style="height:50vh;">
			  <el-tree :data="deptOptions" :props="defaultProps" show-checkbox
			  	:filter-node-method="filterNode" ref="tree" :check-on-click-node='false' show-file-list
			  	node-key="id" :default-expanded-keys="expandedKeys" @node-click="handleNodeClick"
			  	accordion highlight-current :expand-on-click-node='false'
				@check='checkChange'/>
			    <template class="custom-tree-node" slot-scope="{ node }">
			      <div>{{ node.label }}</div>
			    </template>
			  </el-tree>
			</el-scrollbar>  
		  </div>
		</div>
		<div>
			<!-- <el-popover placement="right" width="300" trigger="click"
				style='position: absolute;right: 20px;top: 100px;'> -->
				<!-- <el-input placeholder="请输入线路" v-model="input1">
					<template slot="prepend" style="background-color: #0000FF;">线路名：</template>
				</el-input> -->
				<!-- <div style='margin-top: 5px;'>
					<span
						style="background-color: #f5f7fa;border: 1px solid #c0c4cc;border-radius:3px 0 0 3px;border-right: none;display: inline-block;width: 98px;padding:7px 0 7px 20px;color: #909399;">上下行:</span>
					<el-select v-model="input2" placeholder="请输入上下行" style='width: 175px;'>
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</div>
				<el-input placeholder="请输入站台" v-model="input3" style='margin-top: 5px;'>
					<template slot="prepend">站台名：</template>
				</el-input> -->
				<!-- <button @click="getBtn" style='margin-top: 5px;padding: 5px;10px'>线路搜索</button> -->
				<!-- <button @click="getBtn2" style='margin-top: 5px;padding: 5px;10px;margin-left: 10px;'>配置站台</button> -->
				<!-- <button @click="clearAllLine"
					style='margin-top: 5px;padding: 5px;10px;margin-left: 40px;'>清除所有线路</button>
				<div style="margin-top: 5px;margin-left: 200px;">
					共<span style="color: #0000FF;font-weight: 700;margin: 0 3px;">{{nums+1}}</span>条线路
				</div> -->
				<!-- <el-button slot="reference"
					style='font-size: 12px;background-color: #000000;color:orangered; display: inline-block;width: 50px;height:50px;border-radius: 50%;'>
					搜索</el-button>
			</el-popover> -->

		</div>
	</div>
</template>
<script>
	import {mapState,mapMutations} from 'vuex'
	import {getStationLine,getStation,getStationInfo,addDevStation,delStation} from "@/api/stationConfig/stationMap"
	import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
	import BmView from 'vue-baidu-map/components/map/MapView.vue'
	import BmBoundary from 'vue-baidu-map/components/others/Boundary'
	import {BmlMarkerClusterer} from 'vue-baidu-map'
	import BmCircle from 'vue-baidu-map/components/overlays/Circle'
	import BmMarker from 'vue-baidu-map/components/overlays/Marker'
	import BmLabel from 'vue-baidu-map/components/overlays/Label'
	import BmControl from 'vue-baidu-map/components/controls/Control.vue'
	import BmScale from 'vue-baidu-map/components/controls/Scale.vue'
	import BmCityList from 'vue-baidu-map/components/controls/CityList.vue'
	import BmBus from 'vue-baidu-map/components/search/Bus.vue'
	import '../../../utils/BMapLib/GeoUtils.js'
	import {
		mapMarker,
		getDev,
		treeselects,
		programs,
		programsSend,
	}from "@/api/system/map"
	import Treeselect from '@riophae/vue-treeselect'
	import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow'
	import '@riophae/vue-treeselect/dist/vue-treeselect.css'
	export default {
		name: 'StationMapConfig',
		components: {
			BaiduMap,
			BmBoundary,
			BmlMarkerClusterer,
			BmControl,
			Treeselect,
			BmCircle,
			BmMarker,
			BmInfoWindow,
			BmBus,
			BmView,
			BmLabel,
			BmCityList,
			BmScale
		},
		data() {
			return {
				iconsArr:[
					{url:require('../../../assets/image/bustrain4.png'), size: {width: 32, height: 32}},
					{url:require('../../../assets/image/bustrain5.png'), size: {width: 32, height: 32}},
					{url:require('../../../assets/image/bustrain6.png'), size: {width: 32, height: 32}}
				],
				indexNun:-1,
				dialogVisible: false,
				checkedCities:[],
				isIndeterminate: false,
				checkAll: false,
				checked1:false,
				checked2:false,
				checked3:false,
				checked5:false,
				checked6:false,
				isUnfold: true,
				input5:'',
				form: {
					deptId: undefined
				},
				mapTreeData: [],
				deptName:undefined,
				expandedKeys: [],
				deptOptions:undefined,
				defaultProps: {
					children: 'children',
					label: 'label'
				},
				indexs:0,
				index:0,
				options: [
					{
						value: 0,
						label: '上行'
					}, {
						value: 1,
						label: '下行'
					}
					, {
						value: undefined,
						label: '无'
					}
				],
				isShow:false,
				pointsed: undefined,
				input1: undefined,
				input2: 0,
				input3: '',
				points: [],
				titleBus: '',
				titleBusArr:[],
				show: false,
				ponArr: [],
				nameArr: [],
				map: undefined,
				BMap: undefined,
				current_zoom: 15,
				ZOOM_PROVINCE_LEVEL: 5,
				ZOOM_MAX_LEVEL: 20,
				location: {
					lng: 116,
					lat: 39
				},
				city: '',
				nums: -1,
				color: [ 
					'#f47920', '#00ff00', '#ff00ff', '#00ffff', '#ef5b9c',
					'#d71345', '#deab8a', '#f47920', '#5f3c23', '#826858', 
					'#817936', '#2e3a1f', '#bed742', '#1d953f', "#444693", 
					'#102b6a', '#4e72b8', '#694d9f', '#ff0000', "#145214"
				],
				currentPolyline:undefined,
				lineName:[],
				polyline:[],
				isAline:'',
				ssd:undefined,
				newInput2:0,
				stationArr:[],
				stationData:[],
				checkId:-10,
				stationMsg:[],
				isStati:undefined,
				deptId:undefined,
				statPosition:[{
					lat:undefined,
					lng:undefined
				}],
				titleBusArr2:[]
			}
		},
		watch: {
		    // 根据名称筛选部门树
		    deptName (val) {
		      this.$refs.tree.filter(val)
		    },
			'form.deptId': 'currDeptChange',
		    // 默认展开第二级节点
		    deptOptions: {
		      handler () {
		        this.deptOptions.forEach(item => {
		          this.expandedKeys.push(item.id)
		        })
		      }
		    },
			'$store.state.deptId': {
			  handler (newval) {
			    this.deptId = newval // 把点击获得的id赋值给queryParams模型id
			  }
			}
		},
		created() {},
		mounted() {
			this.deptId = this.$store.state.deptId
			this.getLine()
		},
		methods: {
			lineBtnChange(items,indexs,index){
				// this.indexNun=index
				this.checked5=true
				this.checked6=false
				this.getBtn(items,indexs,index)
			},
			checkChange(data,node){
				if(data.index==1&&this.checkId!=data.id){
					this.$refs.tree.setCheckedKeys([data.id]);
					this.checkId=data.id
				}	
			},
			removeConfig(){
				this.$confirm('确定要删除本站台的设备吗', '提示', {
				          confirmButtonText: '确定',
				          cancelButtonText: '取消',
				          type: 'warning'
				        }).then(() => {
				          delStation({
				          	cardNum:this.stationData.number
				          }).then(res=>{
				          	if(res.code==200){
				          		this.$message({
				          		   showClose: true,
				          		   message:res.msg,
				          		   type: 'success'       
				          		});
								this.show=false
				          	}
				          })
				        }).catch(() => {
				          this.$message({
				            type: 'info',
				            message: '已取消删除'
				          });          
				        });
				
			},
			handleCheckAllChange(val) {
			  this.checkedCities = val ? this.titleBusArr : [];
			  this.isIndeterminate = false;
			},
			handleCheckedCitiesChange(value) {
			  let checkedCount = value.length;
			  this.checkAll = checkedCount === this.titleBusArr.length;
			  this.isIndeterminate = checkedCount > 0 && checkedCount < this.titleBusArr.length;
			},      
			changeLineShow(){
				if(this.checked1){
					this.polyline.show()
				}else{
					this.polyline.hide()
				}
			},
			configDev(){
				if(this.input5!=''&&this.checkedCities.length>0){
					let newObj={
						lat:[],
						lineId:[],
						lineName:[],
						lineType:[],
						lng:[],
						number:this.input5,
						seq:[],
						stationId:[],
						stationName:this.stationData.stationName,
						deptId:121
					}
					for(let i=0;i<this.checkedCities.length;i++){
						let d=this.stationData.lineName.indexOf(this.checkedCities[i])
						newObj.lat.push(this.stationData.lat[d])
						newObj.lineId.push(this.stationData.lineId[d])
						newObj.lineName.push(this.stationData.lineName[d])
						newObj.lineType.push(this.stationData.lineType[d])
						newObj.lng.push(this.stationData.lng[d])
						newObj.stationId.push(this.stationData.stationId[d])
					}
					addDevStation(newObj).then(res=>{
						if(res.code==200){
							this.$message({
							    showClose: true,
							    message:res.msg,
							    type: 'success'      
							});
							this.input5=''
							this.checkedCities=[]
							this.show=false
							this.dialogVisible = false
						}
					})
				}else{
					this.$message({
					   showClose: true,
					   message: '请输入设备号和选择线路',
					   type: 'warning'
					});
				}
			},
			getLine(){
				getStationLine(121).then(res=>{
					if(res.code==200){
						this.deptOptions=res.data
						// console.log(res.data)
					}
				})
			},
			// 是否展开工具组件
			Unfold() {
				this.isUnfold = !this.isUnfold
			},
			currDeptChange(val){
			  if (val == null || val == undefined || val == '') {
			  	return
			  }
			},
			// 筛选节点
			filterNode(value, data) {
				if (!value) return true
				return data.label.indexOf(value) !== -1
			},
			// 单击节点
			handleNodeClick(data) {
				if(data.index==1){
					this.checked5=false
					this.checked6=true
					this.getBtn(data)
				}
			},
			infoWindowClose() {
				this.show = false
			},
			infoWindowOpen() {
				this.show = true
			},
			getLocationPoint(point, index) {
				this.indexs = index
				// if(this.isStati!=this.stationArr[index]){
					getStationInfo({
						deptId:121,
						stationId:this.stationArr[index],
					}).then(res=>{
						if(res.code==200){
							let str=''
							let arr=[]
							for(let i=0;i<res.data[0].lineName.length;i++){
								str+=res.data[0].lineName[i]+','
								arr.push(res.data[0].lineName[i])
							}
							// console.log(res.data)
							this.titleBus=str
							this.titleBusArr=arr
							this.stationMsg=res.data[0].seq
							this.stationData=res.data[0]
							this.checkedCities=res.data[0].lineName
							this.checkAll=true
							this.isShow=true
							this.show = true
						}
					})	
					this.pointsed = point
					this.map.panTo(point);
				// }else{
				// 	this.isShow=true
				// 	this.show = true
				// }
				// this.isStati=this.stationArr[index]
			},
			cityChange(data) {
				let that = this
				let geocProvince = new BMap.Geocoder();
				geocProvince.getLocation(this.map.getCenter(), function(rs) {
					that.city = rs.addressComponents.city
					// console.log(that.city)
				})
			},
			// 批量转换gprs坐标
			converMap(arr, i, convertor) {
				return new Promise((resolve, reject) => {
					// 转换方法convertor.translate(要转换的值,1,5,回调函数)
					// console.log(this.ssd[i])
					convertor.translate(this.ssd[i], 1, 5, data => {
						arr.push(data.points)
						resolve(arr)
					})
				})
			},
			getLocationPoint2(point){
				getStationInfo({
					deptId:121,
					stationName:this.input3,
					lineType:this.input2
				}).then(res=>{
					if(res.code==200){
						let str=''
						let arr=[]
						for(let i=0;i<res.data[0].lineName.length;i++){
							str+=res.data[0].lineName[i]+','
							arr.push(res.data[0].lineName[i])
						}
						// console.log(res.data)
						this.titleBus=str
						this.titleBusArr=arr
						this.nameArr[0]=this.input3
						this.stationMsg=res.data[0].seq
						this.stationData=res.data[0]
						this.checkedCities=res.data[0].lineName
						this.checkAll=true
						this.show=true
					}
				})	
				this.pointsed = point
				this.map.panTo(point);
			},
			// 所有坐标集中到一个数组
			async transformGps() {
				let arr = []
				var convertor = new BMap.Convertor()
				for (let i = 0; i < this.ssd.length; i++) {
					await this.converMap(arr, i, convertor)
				}
				this.ponArr = [].concat.apply([], arr)
			},
			getBtn(data,indexs,index) {
				// console.log(data)
				// if(this.isAline==data.label&&this.input2==this.newInput2){
				// 	return
				// }
				// this.newInput2=this.input2
				this.checked2=false
				this.clearAllLine()
				// this.isAline=data.label
				let that = this
				var bus = new BMap.BusLineSearch(that.city, {
					onGetBusListComplete: function onGetBusListComplete(result) {
						let busListItem = that.input2; //公交上下行
						let fstLine = result.getBusListItem(busListItem);
						bus.getBusLine(fstLine);
					},
					onGetBusLineComplete: function onGetBusLineComplete(busline) {
						that.polyline = new BMap.Polyline(busline.getPath(), {
							enableEditing: false, // 是否启用线编辑，默认为false
							enableClicking: true, // 是否响应点击事件，默认为true
							strokeWeight: '6', // 折线的宽度，以像素为单位
							strokeOpacity: 1, // 折线的透明度，取值范围0 - 1
							// strokeColor: '#694d9f' ,// 折线颜色
							// strokeColor: '#00bd00' ,// 折线颜色
							strokeColor: '#d4237a' ,// 折线颜色
							
						});
						that.map.addOverlay(that.polyline); //添加折线覆盖物
						if(that.checked5){
							var convertor = new BMap.Convertor()
							convertor.translate([{lng:that.titleBusArr2[index].lng[indexs],lat:that.titleBusArr2[index].lat[indexs]}], 1, 5, data => {
								that.map.centerAndZoom(data.points[0], 16);
							})
						}else if(that.checked6){
							console.log(100)
							console.log(busline)
							that.map.centerAndZoom(busline.TB[parseInt(busline.TB.length / 2)].position, 14);
						}	
					},
				});
				bus.getBusList(data.label)
				that.ponArr=[]
				that.nameArr=[]
				getStation({
					deptId:121,
					lineId:data.id,
					lineType:that.input2
				}).then(res=>{
					if(res.code==200){
						// 百度地图坐标转换一次最多支持10个，需要将数据分割成二维数组形式，我这里写9个一组
						const num = 10
						// Math.ceil()  “向上取整”， 即小数部分直接舍去，并向正数部分进1
						const parts = Math.ceil(res.data.length / num)
						const newArr = []
						for (let i = 0; i <= parts; i++) {
							if (i * num >= res.data.length) {
								break
							}
							newArr.push(res.data.slice(i * num, (i + 1) * num))
						}
						that.ssd=newArr
						that.transformGps()
						for(let i=0;i<res.data.length;i++){
							that.nameArr[i]=res.data[i].stationName
							that.stationArr[i]=res.data[i].stationId
						}
						that.checked2=true
						that.checked1=true
					}
				})
				
			},
			getBtn2() {
				this.titleBusArr2=[]
				this.indexNun=-1
				this.clearAllLine()
				if(this.input3!=''){
					getStationInfo({
						deptId:121,
						stationName:this.input3,
						lineType:this.input2
					}).then(res=>{
						if(res.code==200){
							console.log(res.data)
							if(res.data.length==0){
								this.$message({
								   showClose: true,
								   message: '请输入正确的站台名称',
								   type: 'warning'
								});
							}else{
								for(let s=0;s<res.data.length;s++){
									let obj={stationName:'',stationLine:[],lat:[],lng:[]}
									obj.stationName=res.data[s].stationName
									obj.lat=res.data[s].lat
									obj.lng=res.data[s].lng
									let arr=[]
									for(let i=0;i<res.data[s].lineName.length;i++){
										arr.push({label:res.data[s].lineName[i],id:res.data[s].lineId[i]})
									}
									obj.stationLine=arr	
									this.titleBusArr2.push(obj)
								}
							}
						}
					})
				}else{
					this.$message({
					   showClose: true,
					   message: '请输入站台名字',
					   type: 'warning'
					});
				}
			},
			clearAllLine() {
				this.map.clearOverlays()
				this.nums = 0
			},
			getCity() {
				let that = this
				let myCity = new BMap.LocalCity();
				myCity.get(function(res) {
					if (res) {
						that.city = res.name;
						that.map.centerAndZoom(that.city, 13);
					} else {
						that.city = "铜仁市"; //默认城市
						that.map.centerAndZoom(that.city, 13);
					}
				});
			},
			drawBoundary() {
				/*画遮蔽层的相关方法
				 *思路: 首先在中国地图最外画一圈，圈住理论上所有的中国领土，然后再将每个闭合区域合并进来，并全部连到西北角。
				 *      这样就做出了一个经过多次西北角的闭合多边形*/
				//定义中国东南西北端点，作为第一层
				//向数组中添加一次闭合多边形，并将西北角再加一次作为之后画闭合区域的起点
				var pStart = new BMap.Point(180, 90);
				var pEnd = new BMap.Point(0, -90);
				var pArray = [
					new BMap.Point(pStart.lng, pStart.lat),
					new BMap.Point(pEnd.lng, pStart.lat),
					new BMap.Point(pEnd.lng, pEnd.lat),
					new BMap.Point(pStart.lng, pEnd.lat)
				];

				//循环添加各闭合区域
				pArray.push(new BMap.Point(135.077218, 48.544352));
				pArray.push(new BMap.Point(134.92218, 48.584352))
				pArray.push(new BMap.Point(134.827218, 48.534352))
				pArray.push(new BMap.Point(134.727669, 48.495377));
				pArray.push(new BMap.Point(134.304531, 48.394091));
				pArray.push(new BMap.Point(133.513447, 48.177476));
				pArray.push(new BMap.Point(132.832747, 48.054205));
				pArray.push(new BMap.Point(132.519993, 47.789172));
				pArray.push(new BMap.Point(131.765704, 47.813962));
				pArray.push(new BMap.Point(131.103402, 47.776772));
				pArray.push(new BMap.Point(130.919429, 48.331824));
				pArray.push(new BMap.Point(130.77225, 48.868729));
				pArray.push(new BMap.Point(129.907577, 49.351849));
				pArray.push(new BMap.Point(128.73015, 49.699156));
				pArray.push(new BMap.Point(127.791888, 49.85404));
				pArray.push(new BMap.Point(127.791888, 50.492084));
				pArray.push(new BMap.Point(126.927215, 51.616759));
				pArray.push(new BMap.Point(126.467283, 52.579818));
				pArray.push(new BMap.Point(125.952158, 53.059077));
				pArray.push(new BMap.Point(124.701142, 53.313247));
				pArray.push(new BMap.Point(123.56051, 53.664362));
				pArray.push(new BMap.Point(121.555204, 53.46722));
				pArray.push(new BMap.Point(120.340983, 53.125528));
				pArray.push(new BMap.Point(119.95464, 52.579818));
				pArray.push(new BMap.Point(120.616942, 52.523746));
				pArray.push(new BMap.Point(120.506559, 52.095236));
				pArray.push(new BMap.Point(119.862653, 51.616759));
				pArray.push(new BMap.Point(119.365926, 50.959196));
				pArray.push(new BMap.Point(119.089967, 50.362806));
				pArray.push(new BMap.Point(119.108364, 50.05583));
				pArray.push(new BMap.Point(118.133307, 49.925357));
				pArray.push(new BMap.Point(117.471005, 49.794528));
				pArray.push(new BMap.Point(116.808702, 49.889712));
				pArray.push(new BMap.Point(116.385564, 49.758785));
				pArray.push(new BMap.Point(115.962426, 48.953617));
				pArray.push(new BMap.Point(115.520891, 48.147476));
				pArray.push(new BMap.Point(115.796851, 47.677465));
				pArray.push(new BMap.Point(116.27518, 47.652609));
				pArray.push(new BMap.Point(117.103059, 47.652609));
				pArray.push(new BMap.Point(118.004526, 47.801568));
				pArray.push(new BMap.Point(118.887596, 47.577968));
				pArray.push(new BMap.Point(119.402721, 47.127871));
				pArray.push(new BMap.Point(119.402721, 46.800397));
				pArray.push(new BMap.Point(118.464459, 46.825659));
				pArray.push(new BMap.Point(117.103059, 46.648575));
				pArray.push(new BMap.Point(115.980824, 46.088213));
				pArray.push(new BMap.Point(115.226534, 45.702829));
				pArray.push(new BMap.Point(114.159491, 45.275796));
				pArray.push(new BMap.Point(112.761297, 45.171782));
				pArray.push(new BMap.Point(111.639061, 45.132727));
				pArray.push(new BMap.Point(111.436691, 44.55683));
				pArray.push(new BMap.Point(111.51028, 44.001703));
				pArray.push(new BMap.Point(110.682402, 43.387647));
				pArray.push(new BMap.Point(108.897864, 42.658724));
				pArray.push(new BMap.Point(106.892559, 42.522781));
				pArray.push(new BMap.Point(103.82021, 42.140555));
				pArray.push(new BMap.Point(102.422016, 42.536389));
				pArray.push(new BMap.Point(101.336575, 42.82146));
				pArray.push(new BMap.Point(99.478448, 42.929712));
				pArray.push(new BMap.Point(97.601924, 42.997272));
				pArray.push(new BMap.Point(96.019756, 43.815487));
				pArray.push(new BMap.Point(92.72664, 45.288784));
				pArray.push(new BMap.Point(91.144473, 45.599605));
				pArray.push(new BMap.Point(91.457227, 46.483616));
				pArray.push(new BMap.Point(90.794924, 47.553064));
				pArray.push(new BMap.Point(89.562305, 48.221295));
				pArray.push(new BMap.Point(88.2377, 48.953617));
				pArray.push(new BMap.Point(87.722576, 49.279683));
				pArray.push(new BMap.Point(87.097067, 49.255604));
				pArray.push(new BMap.Point(86.60034, 49.122957));
				pArray.push(new BMap.Point(86.177203, 48.710696));
				pArray.push(new BMap.Point(85.533297, 48.344091));
				pArray.push(new BMap.Point(85.404516, 47.875888));
				pArray.push(new BMap.Point(85.349324, 47.390897));
				pArray.push(new BMap.Point(84.926186, 47.215692));
				pArray.push(new BMap.Point(83.233635, 47.315881));
				pArray.push(new BMap.Point(82.865689, 47.328391));
				pArray.push(new BMap.Point(82.258578, 45.844449));
				pArray.push(new BMap.Point(82.368962, 45.366651));
				pArray.push(new BMap.Point(82.093003, 45.30177));
				pArray.push(new BMap.Point(80.989165, 45.275796));
				pArray.push(new BMap.Point(79.903724, 45.015402));
				pArray.push(new BMap.Point(80.326862, 44.332772));
				pArray.push(new BMap.Point(80.510835, 43.642047));
				pArray.push(new BMap.Point(80.621219, 43.186043));
				pArray.push(new BMap.Point(80.27167, 43.010775));
				pArray.push(new BMap.Point(79.885327, 42.304653));
				pArray.push(new BMap.Point(79.259819, 41.838593));
				pArray.push(new BMap.Point(78.487133, 41.576647));
				pArray.push(new BMap.Point(77.916816, 41.341363));
				pArray.push(new BMap.Point(77.272911, 41.16086));
				pArray.push(new BMap.Point(76.739389, 41.02167));
				pArray.push(new BMap.Point(76.26106, 40.546202));
				pArray.push(new BMap.Point(75.672346, 40.75639));
				pArray.push(new BMap.Point(74.881262, 40.630357));
				pArray.push(new BMap.Point(74.255754, 40.293095));
				pArray.push(new BMap.Point(73.777425, 39.939968));
				pArray.push(new BMap.Point(73.74063, 39.556517));
				pArray.push(new BMap.Point(73.53826, 39.34256));
				pArray.push(new BMap.Point(73.685438, 38.725549));
				pArray.push(new BMap.Point(74.034987, 38.407771));
				pArray.push(new BMap.Point(74.458125, 38.335352));
				pArray.push(new BMap.Point(74.734084, 38.074036));
				pArray.push(new BMap.Point(74.844468, 37.577865));
				pArray.push(new BMap.Point(74.678892, 37.21089));
				pArray.push(new BMap.Point(74.6237, 36.975076));
				pArray.push(new BMap.Point(75.414784, 36.501232));
				pArray.push(new BMap.Point(75.801127, 35.934721));
				pArray.push(new BMap.Point(76.518622, 35.379154));
				pArray.push(new BMap.Point(77.309706, 35.137703));
				pArray.push(new BMap.Point(77.972008, 34.758986));
				pArray.push(new BMap.Point(78.376749, 34.241106));
				pArray.push(new BMap.Point(78.523927, 33.473647));
				pArray.push(new BMap.Point(78.7079, 32.978834));
				pArray.push(new BMap.Point(78.450338, 32.745921));
				pArray.push(new BMap.Point(78.30316, 32.340745));
				pArray.push(new BMap.Point(78.431941, 32.04349));
				pArray.push(new BMap.Point(78.671106, 31.572152));
				pArray.push(new BMap.Point(78.855079, 31.145879));
				pArray.push(new BMap.Point(79.425395, 30.797108));
				pArray.push(new BMap.Point(80.087697, 30.447053));
				pArray.push(new BMap.Point(81.301919, 29.855455));
				pArray.push(new BMap.Point(81.90903, 30.0157));
				pArray.push(new BMap.Point(82.7921, 29.485907));
				pArray.push(new BMap.Point(84.539843, 28.661613));
				pArray.push(new BMap.Point(85.71727, 28.124721));
				pArray.push(new BMap.Point(86.821108, 27.732537));
				pArray.push(new BMap.Point(87.998535, 27.69979));
				pArray.push(new BMap.Point(88.568851, 27.716165));
				pArray.push(new BMap.Point(88.863208, 27.108656));
				pArray.push(new BMap.Point(89.580703, 27.190949));
				pArray.push(new BMap.Point(89.654292, 27.765274));
				pArray.push(new BMap.Point(90.923705, 27.650651));
				pArray.push(new BMap.Point(91.751584, 27.223849));
				pArray.push(new BMap.Point(92.04594, 26.778874));
				pArray.push(new BMap.Point(92.965805, 26.646689));
				pArray.push(new BMap.Point(93.830478, 26.960375));
				pArray.push(new BMap.Point(94.860727, 27.453873));
				pArray.push(new BMap.Point(96.185332, 27.798001));
				pArray.push(new BMap.Point(97.123594, 27.503101));
				pArray.push(new BMap.Point(97.620321, 27.896122));
				pArray.push(new BMap.Point(97.675513, 28.059457));
				pArray.push(new BMap.Point(98.080254, 27.306056));
				pArray.push(new BMap.Point(98.595378, 27.009824));
				pArray.push(new BMap.Point(98.393008, 26.066566));
				pArray.push(new BMap.Point(97.804294, 25.483523));
				pArray.push(new BMap.Point(97.528335, 24.847254));
				pArray.push(new BMap.Point(97.417951, 24.10637));
				pArray.push(new BMap.Point(97.804294, 23.717348));
				pArray.push(new BMap.Point(98.595378, 23.886634));
				pArray.push(new BMap.Point(98.834543, 23.123105));
				pArray.push(new BMap.Point(99.239283, 22.697005));
				pArray.push(new BMap.Point(99.165694, 22.303805));
				pArray.push(new BMap.Point(99.386462, 21.857966));
				pArray.push(new BMap.Point(100.251135, 21.445169));
				pArray.push(new BMap.Point(100.839848, 21.290063));
				pArray.push(new BMap.Point(101.704521, 21.031186));
				pArray.push(new BMap.Point(102.05407, 21.152053));
				pArray.push(new BMap.Point(101.998878, 21.582901));
				pArray.push(new BMap.Point(101.962083, 22.132497));
				pArray.push(new BMap.Point(102.587591, 22.355156));
				pArray.push(new BMap.Point(103.599443, 22.338041));
				pArray.push(new BMap.Point(104.482513, 22.560368));
				pArray.push(new BMap.Point(105.383981, 22.799392));
				pArray.push(new BMap.Point(106.083078, 22.59454));
				pArray.push(new BMap.Point(106.469421, 22.286683));
				pArray.push(new BMap.Point(106.874162, 21.754879));
				pArray.push(new BMap.Point(107.315697, 21.514051));
				pArray.push(new BMap.Point(107.812424, 21.410715));
				pArray.push(new BMap.Point(107.775629, 21.134792));
				pArray.push(new BMap.Point(106.929353, 20.269201));
				pArray.push(new BMap.Point(106.175064, 19.17158));
				pArray.push(new BMap.Point(106.377435, 18.470789));
				pArray.push(new BMap.Point(107.297299, 17.23746));
				pArray.push(new BMap.Point(109.008248, 15.675143));
				pArray.push(new BMap.Point(109.688948, 13.705222));
				pArray.push(new BMap.Point(109.652153, 11.664031));
				pArray.push(new BMap.Point(108.750686, 9.571001));
				pArray.push(new BMap.Point(108.198767, 6.876803));
				pArray.push(new BMap.Point(108.493124, 5.090099));
				pArray.push(new BMap.Point(109.817729, 3.612656));
				pArray.push(new BMap.Point(111.10554, 3.298351));
				pArray.push(new BMap.Point(114.71141, 5.514272));
				pArray.push(new BMap.Point(116.256783, 7.556636));
				pArray.push(new BMap.Point(118.758815, 10.883133));
				pArray.push(new BMap.Point(119.531502, 13.669242));
				pArray.push(new BMap.Point(119.494707, 16.617614));
				pArray.push(new BMap.Point(120.414572, 18.961654));
				pArray.push(new BMap.Point(121.51841, 20.633358));
				pArray.push(new BMap.Point(122.751029, 22.303805));
				pArray.push(new BMap.Point(123.247756, 23.378111));
				pArray.push(new BMap.Point(124.811526, 25.68375));
				pArray.push(new BMap.Point(126.577667, 25.900278));
				pArray.push(new BMap.Point(127.479134, 26.67975));
				pArray.push(new BMap.Point(128.454191, 28.189945));
				pArray.push(new BMap.Point(128.766945, 29.93561));
				pArray.push(new BMap.Point(128.73015, 31.650877));
				pArray.push(new BMap.Point(127.957464, 32.153119));
				pArray.push(new BMap.Point(127.221572, 32.745921));
				pArray.push(new BMap.Point(127.019202, 33.596907));
				pArray.push(new BMap.Point(125.988953, 33.827543));
				pArray.push(new BMap.Point(125.731391, 34.546135));
				pArray.push(new BMap.Point(125.878569, 35.454458));
				pArray.push(new BMap.Point(125.731391, 36.634799));
				pArray.push(new BMap.Point(125.80498, 37.51927));
				pArray.push(new BMap.Point(124.425183, 37.972159));
				pArray.push(new BMap.Point(124.498772, 38.58128));
				pArray.push(new BMap.Point(125.013896, 39.242487));
				pArray.push(new BMap.Point(124.590758, 39.471014));
				pArray.push(new BMap.Point(124.296402, 39.840762));
				pArray.push(new BMap.Point(124.388388, 40.081441));
				pArray.push(new BMap.Point(124.940307, 40.335346));
				pArray.push(new BMap.Point(125.731391, 40.630357));
				pArray.push(new BMap.Point(126.448885, 40.96591));
				pArray.push(new BMap.Point(126.798434, 41.493704));
				pArray.push(new BMap.Point(127.111188, 41.410654));
				pArray.push(new BMap.Point(127.883875, 41.271998));
				pArray.push(new BMap.Point(128.490985, 41.452192));
				pArray.push(new BMap.Point(128.307012, 41.879854));
				pArray.push(new BMap.Point(128.950918, 41.921089));
				pArray.push(new BMap.Point(129.484439, 42.12686));
				pArray.push(new BMap.Point(129.999564, 42.549994));
				pArray.push(new BMap.Point(130.073153, 42.807915));
				pArray.push(new BMap.Point(130.404304, 42.495557));
				pArray.push(new BMap.Point(130.77225, 42.359256));
				pArray.push(new BMap.Point(130.698661, 42.726583));
				pArray.push(new BMap.Point(131.195388, 42.848541));
				pArray.push(new BMap.Point(131.360964, 43.494895));
				pArray.push(new BMap.Point(131.342566, 44.491021));
				pArray.push(new BMap.Point(131.820896, 45.002351));
				pArray.push(new BMap.Point(132.998323, 44.976239));
				pArray.push(new BMap.Point(133.623831, 45.599605));
				pArray.push(new BMap.Point(134.102161, 46.394582));
				pArray.push(new BMap.Point(134.37812, 47.228226));
				pArray.push(new BMap.Point(134.874847, 47.851127));
				pArray.push(new BMap.Point(134.985231, 48.233588));
				pArray.push(new BMap.Point(135.13241, 48.454352));
				pArray.push(new BMap.Point(135.077218, 48.474352));

				//添加遮蔽层
				var plyall = new BMap.Polygon(pArray, {
					strokeOpacity: 1,
					strokeColor: "#f8f8f8",
					strokeWeight: 1,
					fillColor: "#f8f8f8",
					fillOpacity: 1
				}); //建立多边形覆盖物
				this.map.addOverlay(plyall);
				//添加遮蔽层
				pStart = new BMap.Point(180, 90);
				pEnd = new BMap.Point(0, -90);
				pArray = [
					new BMap.Point(135.077218, 48.454352),
					new BMap.Point(pStart.lng, pStart.lat),
					new BMap.Point(pStart.lng, pEnd.lat),
					new BMap.Point(135.077218, 48.454352)
				];
				var sanjiaoxing = new BMap.Polygon(pArray, {
					strokeOpacity: 1,
					strokeColor: "#f8f8f8",
					strokeWeight: 1,
					fillColor: "#f8f8f8",
					fillOpacity: 1
				}); //建立多边形覆盖物
				this.map.addOverlay(sanjiaoxing);
			},
			// 获取设备数据
			handler({BMap,map}) {
				this.map = map;
				this.BMap = BMap;
				this.getCity()
				// 初始化地图
				this.drawBoundary()
				let point = new BMap.Point(108, 36);
				map.setMinZoom(this.ZOOM_PROVINCE_LEVEL); //最小zoom缩放级别
				map.setMaxZoom(this.ZOOM_MAX_LEVEL); //最大zoom缩放级别
			},
			//清除覆盖物
			removeOverlay(map) {
				map.clearOverlays();
			},
			//设置所有覆盖物为可清除
			setAllOverLayClear(map) {
				let allOverlay = map.getOverlays();
				for (let overlay of allOverlay) {
					overlay.enableMassClear();
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	* {
		padding: 0;
		margin: 0;
	}

	::v-deep#container {
		width: 100%;
		height: 100%;
		position: relative;
		p{
			margin-bottom:3px;
		}
		.lineBox{
			&.active {
				height: 2.2rem;
			}
			width:210px;
			position: absolute;
			left: 0;
			top: 0;
			background-color:#ffffff;
			height: 100%;
			overflow:hidden;
			.lineTop{
				position: relative;
				height:35px;
				line-height:35px;
				color: #ffffff;
				font-weight: 700;
				font-size:16px;
				padding-left: 15px;
				padding-left:15px;
				background-color: #000000;
				.unfold {
					width: 20px;
					height: 20px;
					position: absolute;
					top: 6px;
					right: 8px;
					cursor: pointer;
					background-color: #9fd7fc;
					border: 1px solid gray;
					text-align: center;
					line-height: 20px;
					i{
						color: orangered;
						font-weight: 900;
						font-size: 15px;
					}
				}
			}
			.lineContent{
				padding: 5px;
				.el-tree-node__content {
				  height: 22px;
				}
			}
		}
		.map {
			width: 100%;
			height: 100%;
			position: absolute;
		}
		.citylist_popup_main .city_content_top{
			height:35px
		}
	}
	.actives{
		background-color:gray;
		color: #ffffff;
	}
</style>
